<template>
  <!-- 左边：标签导航栏 -->
  <div class="fixed top-[64px] h-[44px] px-2 right-0 z-50 flex items-center bg-white transition-all duration-500 shadow"
       style="left: 250px;" :style="{left: menuStore.menuWidth}">
    <el-tabs v-model="activeTab" type="card" class="demo-tabs" @tab-remove="removeTab" style="min-width: 10px;"
             @tab-change="tabChange">
      <el-tab-pane v-for="item in tabList" :key="item.path" :label="item.title" :name="item.path"
                   :closable="item.path !== '/admin/index'">
      </el-tab-pane>
    </el-tabs>
    <!-- 右侧下拉菜单 -->
    <span class="ml-auto flex items-center justify-center h-[32px] w-[32px]">
      <el-dropdown>
        <span class="el-dropdown-link">
          <el-icon class="el-icon--right">
            <arrow-down/>
            </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="closeOthers">关闭其他</el-dropdown-item>
            <el-dropdown-item @click="closeAll">关闭全部</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </span>
  </div>
  <div class="h-[44px]"></div>
</template>

<script setup>
import {ref, onMounted} from 'vue'
import {useRoute, useRouter, onBeforeRouteUpdate, routerKey} from 'vue-router'
import {useTabListStore} from "@/stores/tab-list.js";

const indexPath = "/admin/index"

const route = useRoute()
const tabListStore = useTabListStore()
const router = useRouter()

// 当前被选中的 tab
const activeTab = ref(route.path)
const tabList = ref([
  {
    title: '仪表盘',
    path: indexPath
  }
])

import {useMenuStore} from '@/stores/menu'

const menuStore = useMenuStore()


onMounted(() => {
  // 初始化标签
  initTabList()
})


const removeTab = (path) => {
  tabList.value = tabList.value.filter(tab => tab.path !== path)
  tabListStore.setTabList(tabList.value)
  if (path === route.path) {
    router.push(indexPath)
    activeTab.value = route.path
  }
}

const closeOthers = () => {
  tabList.value = tabList.value.filter(tab => !(tab.path !== route.path && tab.path !== indexPath))
  tabListStore.setTabList(tabList.value)
}

const closeAll = () => {
  tabList.value = tabList.value.filter(tab => !(tab.path !== indexPath))
  tabListStore.setTabList(tabList.value)
  activeTab.value = indexPath
  router.push(indexPath)
}

// 初始化标签页
const initTabList = () => {
  // 从 cookie 中获取缓存起来的标签导航栏数据
  let tabs = tabListStore.getTabList()
  // 若不为空，则赋值
  if (tabs) {
    tabList.value = tabs
  }
}

const addTab = (tab) => {
  // 标签是否不存在
  let isTabNotExisted = tabList.value.findIndex(item => item.path === tab.path) === -1
  // 如果不存在
  if (isTabNotExisted) {
    // 添加标签
    tabList.value.push(tab)
  }
  // 存储 tabList 到 cookie 中
  tabListStore.setTabList(tabList.value)
}

const tabChange = (path) => {
  router.push(path)
}

// 在路由切换前被调用
onBeforeRouteUpdate((to, from) => {
  // 设置被激活的 Tab 标签
  activeTab.value = to.path
  // 添加 Tab 标签页
  addTab({
    title: to.meta.title,
    path: to.path
  })
})
</script>

<style>
.el-tabs__item {
  font-size: 12px;
  border: 1px solid #d8dce5 !important;
  border-radius: 3px !important;
}

.el-tabs--card > .el-tabs__header .el-tabs__item {
  margin-left: 0.1rem !important;
  margin-right: 0.1rem !important;
}

.el-tabs__item.is-active {
  background-color: var(--el-color-primary) !important;
  color: #fff;
}

.el-tabs__item.is-active::before {
  content: "";
  background-color: #45cc0f;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: relative;
  margin-right: 4px;
}

.el-tabs {
  height: 32px;
}

.el-tabs__header {
  margin-bottom: 0;
}

.el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: 0;
}

.el-tabs--card > .el-tabs__header .el-tabs__item {
  height: 32px;
  line-height: 32px;
  border: 0;
  background: #fff;
}

.el-tabs--card > .el-tabs__header {
  border: 0;
}

.el-tabs__nav-prev, .el-tabs__nav-next {
  line-height: 35px;
}

.is-disabled {
  cursor: not-allowed;
  color: #d1d5db;
}
</style>
<style scoped>
:deep(.el-tooltip__trigger:focus-visible) {
  outline: unset;
}
</style>